<template>
  <!-- 第二行数据 -->
  <div class="app-box">
    <div style="flex: 0 1 25%">
      <dv-border-box-13 style="width: 100%; height: 200px">
        <PillarChart style="padding: 5px" :typeChart="'bar'" />
      </dv-border-box-13>
      <dv-border-box-1 style="width: 100%; height: 200px">
        <!-- 胶囊图 -->
        <capsule-data
          :echartData="echartData"
          :colors="['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff']"
        />
      </dv-border-box-1>
      <dv-border-box-2 style="width: 100%; height: 200px"
        ><dv-water-level-pond
          :config="config4"
          style="width: 100%; height: 200px"
      /></dv-border-box-2>
    </div>
    <div style="flex: 0 1 50%">
      <dv-border-box-1 style="width: 100%; height: 600px">
        <dv-flyline-chart-enhanced
          :config="config2"
          style="width: 100%; height: 600px"
        />
      </dv-border-box-1>
    </div>
    <div style="flex: 0 1 25%">
      <dv-border-box-1 style="width: 100%; height: 300px">
        <dv-conical-column-chart
          :config="config"
          style="width: 100%; height: 300px"
        />
      </dv-border-box-1>
      <dv-border-box-6 style="width: 100%; height: 300px">
        <dv-scroll-ranking-board
          :config="config6"
          style="width: 100%; height: 300px;padding:0px 5px 0px 5px"
        />
      </dv-border-box-6>
    </div>
  </div>
</template>

<script>
import capsuleData from "./capsuleData.vue";
import PillarChart from "./PillarChart.vue";
export default {
  components: {
    capsuleData,
    PillarChart,
  },
  data() {
    return {
      echartData: [
        {
          name: "标题1",
          value: 100,
        },
        {
          name: "标题2",
          value: 200,
        },
        {
          name: "标题3",
          value: 300,
        },
        {
          name: "标题4",
          value: 400,
        },
        {
          name: "标题5",
          value: 500,
        },
        {
          name: "标题6",
          value: 600,
        },
      ],
      config5: {
        data: [66, 45],
        shape: "roundRect",
        colors: ["#00BAFF", "#3DE7C9"],
      },
      config2: {
        points: [
          {
            name: "郑州",
            coordinate: [0.48, 0.35],
            halo: {
              show: true,
            },
            icon: {
              src: require("../assets/img/mapCenterPoint.png"),
              width: 30,
              height: 30,
            },
            text: {
              show: false,
            },
          },
          {
            name: "新乡",
            coordinate: [0.52, 0.23],
          },
          {
            name: "焦作",
            coordinate: [0.43, 0.29],
          },
          {
            name: "开封",
            coordinate: [0.59, 0.35],
          },
          {
            name: "许昌",
            coordinate: [0.53, 0.47],
          },
          {
            name: "平顶山",
            coordinate: [0.45, 0.54],
          },
          {
            name: "洛阳",
            coordinate: [0.36, 0.38],
          },
          {
            name: "周口",
            coordinate: [0.62, 0.55],
            halo: {
              show: true,
              color: "#8378ea",
            },
          },
          {
            name: "漯河",
            coordinate: [0.56, 0.56],
          },
          {
            name: "南阳",
            coordinate: [0.37, 0.66],
            halo: {
              show: true,
              color: "#37a2da",
            },
          },
          {
            name: "信阳",
            coordinate: [0.55, 0.81],
          },
          {
            name: "驻马店",
            coordinate: [0.55, 0.67],
          },
          {
            name: "济源",
            coordinate: [0.37, 0.29],
          },
          {
            name: "三门峡",
            coordinate: [0.2, 0.36],
          },
          {
            name: "商丘",
            coordinate: [0.76, 0.41],
          },
          {
            name: "鹤壁",
            coordinate: [0.59, 0.18],
          },
          {
            name: "濮阳",
            coordinate: [0.68, 0.17],
          },
          {
            name: "安阳",
            coordinate: [0.59, 0.1],
          },
        ],
        lines: [
          {
            source: "新乡",
            target: "郑州",
          },
          {
            source: "焦作",
            target: "郑州",
          },
          {
            source: "开封",
            target: "郑州",
          },
          {
            source: "周口",
            target: "郑州",
            color: "#fb7293",
            width: 2,
          },
          {
            source: "南阳",
            target: "郑州",
            color: "#fb7293",
            width: 2,
          },
          {
            source: "济源",
            target: "郑州",
          },
          {
            source: "三门峡",
            target: "郑州",
          },
          {
            source: "商丘",
            target: "郑州",
          },
          {
            source: "鹤壁",
            target: "郑州",
          },
          {
            source: "濮阳",
            target: "郑州",
          },
          {
            source: "安阳",
            target: "郑州",
          },
          {
            source: "许昌",
            target: "南阳",
            color: "#37a2da",
          },
          {
            source: "平顶山",
            target: "南阳",
            color: "#37a2da",
          },
          {
            source: "洛阳",
            target: "南阳",
            color: "#37a2da",
          },
          {
            source: "驻马店",
            target: "周口",
            color: "#8378ea",
          },
          {
            source: "信阳",
            target: "周口",
            color: "#8378ea",
          },
          {
            source: "漯河",
            target: "周口",
            color: "#8378ea",
          },
        ],
        icon: {
          show: true,
          src: require("../assets/img/mapPoint.png"),
        },
        text: {
          show: true,
        },
        k: 0.5,
        bgImgSrc: require("../assets/img/map.jpg"),
      },
      config: {
        data: [
          {
            name: "周口",
            value: 55,
          },
          {
            name: "南阳",
            value: 120,
          },
          {
            name: "西峡",
            value: 71,
          },
          {
            name: "驻马店",
            value: 66,
          },
          {
            name: "新乡",
            value: 80,
          },
          {
            name: "信阳",
            value: 35,
          },
          {
            name: "漯河",
            value: 15,
          },
        ],
        img: [
          require("../assets/img/1st.png"),
          require("../assets/img/2st.png"),
          require("../assets/img/3st.png"),
          require("../assets/img/4st.png"),
          require("../assets/img/5st.png"),
          require("../assets/img/6st.png"),
          require("../assets/img/7st.png"),
        ],
      },
      config4: {
        data: [66, 45],
        shape: "roundRect",
      },
      config6: {
        data: [
          {
            name: "周口",
            value: 55,
          },
          {
            name: "南阳",
            value: 120,
          },
          {
            name: "西峡",
            value: 78,
          },
          {
            name: "驻马店",
            value: 66,
          },
          {
            name: "新乡",
            value: 80,
          },
          {
            name: "信阳",
            value: 45,
          },
          {
            name: "漯河",
            value: 29,
          },
        ],
      },
    };
  },
};
</script>

<style lang="scss" scoped></style>
